<%--
  Created by IntelliJ IDEA.
  User: Lamb
  Date: 2021/11/19
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <style>
        html,body{
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .all{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .login{
            width: 20%;
            padding: 50px;
            border: 1px solid gainsboro;
        }
        .login input{
            margin-top: 5px;
        }
        .main{
            display: flex;
            flex-direction: column;
        }
        .main input{
            border-radius: 0;
            border-bottom: 1px solid black;
        }
    /*    提示框样式  */
        .tip{
            top: 20%;
            position: fixed;
            z-index: 2000;
            width: 50%;
        }
    /*    移动端适配 */
        @media screen and (max-width: 1200px) {
            .all{
                display: flex;
                flex-direction: column;
                width: 100%;
            }
            .login{
                width: 50%;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="header">
    <%@include file="WEB-INF/views/header.jsp" %>
</div>
<div class="alert alert-danger tip alert-dismissable hide">登录失败，请重新输入账户和密码！</div>
<div class="all">
    <div class="image wow animate__animated animate__slideInLeft">
        <img src="image/login.png" alt="" width="700rem">
    </div>
    <div class="login wow animate__animated animate__slideInRight">
        <h1 style="font-weight: bolder">Login</h1>
        <form action="login" method="POST">
            <div class="main">
                账户：<input type="text"  value="" required name="username" >
                密码：<input type="password" type="password" value="" name="password" required >
                <br>
                <button type="submit"  class="btn btn-info">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$(function (){
    //如果后台返回登录失败 则弹窗提示
    var res = "${res}";
    if(res === "error"){
        $(".tip").addClass("show");
        window.setTimeout(function(){
            $(".tip").removeClass("show");
        },1000);//显示的时间
    }
})
</script>
</html>
